<template>
  <div>
    <a-spin  size="large" v-if="loading===true"/>

    <div v-if="loading===false">
      <a-card title="服务器基础信息">
        <a-descriptions bordered>
          <a-descriptions-item label="服务器名称">
            {{ serverInfo.sys.computerName }}
          </a-descriptions-item>
          <a-descriptions-item label="操作系统" :span="2">
            {{ serverInfo.sys.osName }}
          </a-descriptions-item>

          <a-descriptions-item label="服务器IP">
            {{ serverInfo.sys.computerIp }}
          </a-descriptions-item>
          <a-descriptions-item label="系统架构" :span="2">
            {{ serverInfo.sys.osArch }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="CPU">
        <a-descriptions bordered>
          <a-descriptions-item label="核心数">
            {{ serverInfo.cpu.cpuNum }}
          </a-descriptions-item>
          <a-descriptions-item label="用户使用率" :span="2">
            {{ serverInfo.cpu.used }}%
          </a-descriptions-item>

          <a-descriptions-item label="Status" :span="3">
            <a-badge status="processing" text="Running"/>
          </a-descriptions-item>

          <a-descriptions-item label="系统使用率">
            {{ serverInfo.cpu.sys }}%
          </a-descriptions-item>
          <a-descriptions-item label="当前空闲率" :span="2">
            {{ serverInfo.cpu.free }}%
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="内存">
        <a-descriptions bordered>
          <a-descriptions-item label="总内存">
            {{ serverInfo.mem.total }}G
          </a-descriptions-item>
          <a-descriptions-item label="已用内存" :span="2">
            {{ serverInfo.mem.used }}G
          </a-descriptions-item>

          <a-descriptions-item label="剩余内存">
            {{ serverInfo.mem.free }}G
          </a-descriptions-item>
          <a-descriptions-item label="使用率" :span="2">
            {{ serverInfo.mem.usage }}%
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="磁盘状态">
        <a-table :pagination="false" :columns="columns" :data-source="serverInfo.sysFiles">
          <span slot="usage" slot-scope="usage">{{ usage }}%</span>
        </a-table>
      </a-card>

      <a-card title="Java虚拟机信息">
        <a-descriptions bordered>
          <a-descriptions-item label="总内存">
            {{ serverInfo.jvm.total }}M
          </a-descriptions-item>
          <a-descriptions-item label="已用内存" :span="2">
            {{ serverInfo.jvm.used }}M
          </a-descriptions-item>

          <a-descriptions-item label="剩余内存">
            {{ serverInfo.jvm.free }}M
          </a-descriptions-item>
          <a-descriptions-item label="使用率" :span="2">
            {{ serverInfo.jvm.usage }}%
          </a-descriptions-item>

          <a-descriptions-item label="Java名称">
            {{ serverInfo.jvm.name }}
          </a-descriptions-item>
          <a-descriptions-item label="Java版本" :span="2">
            {{ serverInfo.jvm.version }}
          </a-descriptions-item>

          <a-descriptions-item label="启动时间">
            {{ serverInfo.jvm.startTime }}
          </a-descriptions-item>
          <a-descriptions-item label="运行时长" :span="2">
            {{ serverInfo.jvm.runTime }}
          </a-descriptions-item>

          <a-descriptions-item label="安装路径">
            {{ serverInfo.jvm.home }}
          </a-descriptions-item>
          <a-descriptions-item label="项目路径" :span="2">
            {{ serverInfo.sys.userDir }}
          </a-descriptions-item>

        </a-descriptions>
      </a-card>

    </div>

  </div>
</template>

<script>


export default {
  name: "ServerMonitor",
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '盘符路径',
          dataIndex: 'dirName',
          key: 'dirName',
        },
        {
          title: '文件系统',
          dataIndex: 'sysTypeName',
          key: 'sysTypeName',
          // ellipsis: true,
        },
        {
          title: '盘符类型',
          dataIndex: 'typeName',
          key: 'typeName',
          // ellipsis: true,
        },
        {
          title: '总大小',
          dataIndex: 'total',
          key: 'total',
          // ellipsis: true,
        },
        {
          title: '可用大小',
          dataIndex: 'free',
          key: 'free',
          // ellipsis: true,
        },
        {
          title: '已用大小',
          dataIndex: 'used',
          key: 'used',
          // ellipsis: true,
        },
        {
          title: '已用百分比',
          dataIndex: 'usage',
          key: 'usage',
          // ellipsis: true,
          scopedSlots: {customRender: 'usage'},
        },


      ],
      serverInfo: {
        sys:{
          computerName:'',
          osName:'',
          computerIp:'',
          osArch:''
        },
        cpu:{
          cpuNum:'',
          used:'',
          sys:"",
          free:''
        },
        mem:{
          total:'',
          used:"",
          free:'',
          usage:""
        },
        sysFiles:[],
        jvm:{
          total:'',
          used:"",
          free:'',
          usage:""
        }
      }
    }
  },
  mounted() {
    this.loading = true;
    this.execReqServerInfo();
  },
  methods: {

    execReqServerInfo() {
      this.loading = true;
      this.$reqGlobal.get('/lte/serverHardInfo').then(res => {
        console.log(res);
        if (res.data.code === 0){
          this.serverInfo = res.data.data;
          this.loading = false;
        }else {
          this.loading = true;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
